<%@ include file="/jsp/common/tagLibs.jsp"%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/user/searchFactor.js"></script>
<script type="text/javascript">
$(function() {
	$( ".calendar").datepicker();
});
</script>
<DIV class=content_division>
<DIV class=content_container>
<DIV class=cleardiv></DIV>
<DIV class=content_left_shadow>
<DIV class=content_right_shadow>
<DIV class=under_flash_shadow></DIV>
<!-- CONTENT START -->
<DIV class=content_inner_container>
<DIV class=cleardiv></DIV>
<DIV class=cleardiv></DIV>
<!-- MAINCOL START -->
<DIV class=maincol style="MARGIN-TOP: 20px;">
<div>
<!-- Tabs Start -->
<div id="tabs" style="width: 900px">
<ul>
	<li><a href="#search"><span>Search</span></a></li>
	<li id="tab-graph-1"><a href="#graph-result-1"><span>Graphical View1</span></a></li>
	<li id="tab-graph-2"><a href="#graph-result-2"><span>Graphical View2</span></a></li>
	<li id="tab-graph-3"><a href="#graph-result-3"><span>Graphical View3</span></a></li>
	<li id="tab-graph-4"><a href="#graph-result-4"><span>Graphical View4</span></a></li>	
</ul>

<div id="search">

<form:form
	commandName="searchVO" id="columnarForm" method="GET" >
	<table>
		<tr>
			<td colspan="2">
			<h5>Choose Period</h5>
			</td>
		</tr>
		<tr>
			<td height="112" valign="top">From: <input id="fromDt" style="width:100px;"
				type="text" name="fromDt" class="input calendar jFocus" value="" />
			<br />
			To:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id="toDt" type="text" name="toDt" style="width:100px;"
				class="input calendar jFocus" value="" /></td>
			<td height="112">&nbsp;</td>
		</tr>
		<tr>
			<td colspan="4">&nbsp;</td>
		</tr>		
		<tr>
			<td colspan="4"><input type="hidden" name="validation" id="validation"/></td>
		</tr>

		<tr>
			<td>&nbsp;</td>
			<td height="31"><input id="searchGraphBtn" name="graph"
				type="submit" value="Graphical View" class="button"></td>
			<td height="31">&nbsp;</td>				
		</tr>
	</table>
</form:form></div>
<div id="graph-result-1" style="background-color: white">
	<iframe frameborder="0" id="graph-iframe-1" width="800" height="850" style="background-color: white" ></iframe>
</div>
<div id="graph-result-2" style="background-color: white">
	<iframe frameborder="0" id="graph-iframe-2" width="800" height="850" style="background-color: white" ></iframe>
</div>
<div id="graph-result-3" style="background-color: white">
	<iframe frameborder="0" id="graph-iframe-3" width="800" height="850" style="background-color: white"></iframe>
</div>
<div id="graph-result-4" style="background-color: white">
	<iframe frameborder="0" id="graph-iframe-4" width="800" height="850" style="background-color: white"></iframe>
</div>

</div>
<!-- Tabs end -->
</div>
</div>
</DIV>
<!-- CONTENT END --></DIV>
</DIV>
<DIV class=cleardiv></DIV>
</DIV>
</DIV>